<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
	<meta charset="UTF-8">
	<title>问题详情</title>
	<script src="../static/js/jquery-3.2.1.min.js" th:src="@{js/jquery-3.2.1.min.js}"></script>
	<script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
	<link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}"/>
	<link rel="stylesheet" href="../static/css/icon.css" th:href="@{css/icon.css}"/>
	<link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>

	<th:block th:fragment="supplement">
		<script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
		<script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
		<script src="../static/js/ion.rangeSlider.js" th:src="@{js/ion.rangeSlider.js}"></script>
		<link rel="stylesheet" href="../static/css/ion.rangeSlider.css"
			  th:href="@{css/ion.rangeSlider.css}">
		<link rel="stylesheet" href="../static/css/ion.rangeSlider.skinNice.css"
			  th:href="@{css/ion.rangeSlider.skinNice.css}">
		<!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
		<style type="text/css">
			.ui.table.dataTable thead th {
				border-left: 0px;
			}
			.ui.special.popup.confirm{
				max-height: 260px;overflow-y:auto;overflow-x:hidden
			}
			.ui.tab.segment.detail{
				height: 260px;overflow-y:auto;overflow-x:hidden
			}
			.ui.segment.detailconfirm{
				height: 225px;
			}
			.ui.segment.detailalarmed{
				height: 180px;overflow-y:auto;overflow-x:hidden
			}
			.row1Height{ height: 230px; }
			.chartBar{ height: 160px; }
		</style>
	</th:block>
</head>
<body>
<!--header start-->
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:replace="layout::left_menu">
		<a class="item logo" href="index.html">
			<img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
																	   alt="stagblogo" class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
			<div class="title item">
                <i class="ion-speedometer titleIcon icon"></i>仪表盘
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/dashboard}">仪表盘</a>
			</div>
			<div class="title item" href="#">
				<i class="ion-ios-world titleIcon  icon"></i>业务概览
			</div>
			<div class="content">
			</div>
			<div class="title item">
				<i class="ion-mouse titleIcon icon"></i>设备监控<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/overview}">设备总览</a>
				<a class="item" href="#">设备详情</a>
			</div>
			<div class="title item" href="#">
				<i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
			</div>
			<div class="content">
			</div>
			<div class="title item">
				<i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">告警日历</a>
				<a class="item" href="#">告警列表</a>
			</div>
			<div class="title item" href="#">
				<i class="ion-briefcase titleIcon icon"></i>报表统计
			</div>
			<div class="content">
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>仪表盘1</span>
			<i class="ion-speedometer icon"></i>
			<div class="menu">
				<div class="header">
					仪表盘1
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<i class="ion-ios-world icon"></i>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备监控</span>
			<i class="ion-mouse icon"></i>
			<div class="menu">
				<div class="header">
					设备监控
				</div>
				<div class="ui divider"></div>
				<a class="item" href="tab.html">设备总览</a>
				<a class="item" href="table.html">设备详情</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<i class="ion-arrow-graph-up-right icon"></i>
			<div class="menu">
				<div class="header">
					视图展示
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>告警展示</span>
			<i class="ion-paintbrush icon"></i>
			<div class="menu">
				<div class="header">
					告警展示
				</div>
				<div class="ui divider"></div>
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>报表统计</span>
			<a href="error.html">
				<i class="ion-briefcase icon"></i>
			</a>
		</div>

		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
		<div class="navslide navwrap" th:replace="layout::top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i>   告警
						<div class="ui red label mini circular">6</div>
						<div class="menu" >
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui dropdown item">
                        <img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
                             alt="label-image"/>
						<div class="menu">
							<a class="item" href="#" th:text="${session.userInfo.name}">whstone</a>
							<a class="item" href="mail.html" th:href="@{/logout}">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>

				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable">
				<!--Site Content-->
				<div class="sixteen wide column">
					<a href="javascript:history.go(-1)" style="float: right"><i class="share icon" ></i>返回上一页</a>
					<div class="header item">
						<h2>
							<i class="large newspaper icon"></i>问题详情
						</h2>
						<!--<i class="share icon" style="float: right"></i>-->
					</div>
					<div class="ui grid" style="padding-top: 10px">
						<div class="six wide column row1Height">
							<div class="ui segment detailconfirm no-padding">
								<table class="ui very basic compact single line fixed definition table center aligned">
									<tbody id="detailTable">
									<tr>
										<td>所属主机</td>
										<td th:text="${problemDetailVO.hostName}"></td>
									</tr>
									<tr>
										<td>监控点</td>
										<td th:text="${problemDetailVO.pointName}"></td>
									</tr>
									<tr>
										<td>监控项</td>
										<td th:text="${problemDetailVO.itemName}"></td>
									</tr>
									<tr>
										<td>触发器描述</td>
										<td th:text="${problemDetailVO.triggerName}"></td>
									</tr>
									<tr>
										<td>严重性</td>
										<td th:text="${problemDetailVO.level}"></td>
									</tr>
									<tr>
										<td>最新状态</td>
										<td th:text="${problemDetailVO.state} == 1 ? '问题' : '正常' "></td>
									</tr>
									<tr>
										<td>阀值</td>
										<td th:text="${problemDetailVO.threshold}"></td>
									</tr>
									<tr>
										<td style="display: none" id="trigger_id" th:text="${problemDetailVO.triggerId}"></td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="ten wide column row1Height" style="padding-left: 0px">
							<div class="ui segment left aligned detailconfirm">

								<div id="problemChart" class="chartBar"></div>
								<div id="filter_content" style="display: block;">
									<input type="text"  id="time_filter" name="time_filter" value=""/>
								</div>
								<div id="trigger-dimmer" class="ui inverted dimmer active">
									<div class="ui text loader">正在加载</div>
								</div>
							</div>

						</div>
					</div>
					<div class="ui segment" style="margin-top: 30px">
						<h3>历史记录</h3>
						<table  id="problemsTable" class="ui compact very basic table center aligned">
						</table>
						<div id="table-dimmer" class="ui inverted dimmer active">
							<div class="ui text loader">正在加载</div>
						</div>
					</div>
				</div>

				<!--已告警提示框 -->
				<div id="alert_pop">
				</div>

				<!--确认记录提示框 -->
				<div id="acknowledge_pop">
				</div>
				<!--事件详情模态框 -->
				<div  th:replace="problemlist::problem_event_page"></div>
				<!--确认事件模态框 -->
				<div th:replace="problemlist::problem_acknowledge_page"></div>

			</div>
		</div>
		<!--maincontent-->
	</div>
</div>
<th:block th:replace="layout::bottom_script(~{::supple})">
	<script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
	<script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
	<script src="../static/js/main.js" th:src="@{js/main.js}"></script>
	<th:block th:fragment="supple">
		<script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
		<script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
		<script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
		<script src="../static/js/custom/problem-common.js" th:src="@{js/custom/problem-common.js}"></script>
		<script src="../static/js/custom/pop-alert.js" th:src="@{js/custom/pop-alert.js}"></script>
		<script src="../static/js/custom/rangeSlider-time.js" th:src="@{js/custom/rangeSlider-time.js}"></script>
		<script type="text/javascript">
            var trigger_id = $("#trigger_id").text();
            //初始化三个月数据
            var send_data = {
                trigger_id : trigger_id,
                begin_time : "",
                end_time : ""
            }

            //页面加载完加载基础数据
			$(function() {
				//初始化表格
                var problemTable = initProblemTable();
				//初始化图形
                var problemChart = drawProblemChart();
                //获取数据
                showTimeCons(problemTable,problemChart);

			})

			//获取图形数据
			function getProblemchart(problemChart) {
                $.ajax({
                    type: "get",
                    url: '/problem/detail_graph',
                    data:send_data,
                    dataType: 'json',
                    success: function (result) {
                        if (result.success) {
                            var data_source ;
                            if(result.data.length != 0) {
                                data_source = echarts.util.map(result.data, function(item, index) {
                                    return {
                                        name: '状态',
                                        value: item,
                                        itemStyle: {
                                            normal: {
                                                color: item[3]
                                            }
                                        }
                                    }
                                });
							}else {
                                data_source = [];
							}

                            problemChart.setOption(
								{
                                    series:[
										{data:data_source}
									]
								}
							);
                            $('#trigger-dimmer').removeClass('active');


                        } else {

                        }
                    },
                    error: function (e) {

                    }
                });
			}
			//绘制时序图形
            function drawProblemChart() {
                //绘制图标数据
                var problemChart = echarts.init(document.getElementById("problemChart"));
                function renderItem(params, api) {
                    var start = api.coord([api.value(0), 0])
                    var end = api.coord([api.value(1), 0])
                    var height = api.size([0, 1])[1] * 0.6;
                    if(api.value(2) === 0) {
                        return {
                            type: 'line',
                            shape: {
                                x1: start[0],
                                y1: start[1] - height / 1.5,
                                x2: start[0],
                                y2: start[1] + height /1.5,
                            },
                            style: {stroke: 'black', lineWidth: 2},
                            z: 100
                        }
                    }
                    return {
                        type: 'rect',
                        shape: echarts.graphic.clipRectByRect({
                            x: start[0],
                            y: start[1] - height / 2,
                            width: end[0] - start[0],
                            height: height
                        }, {
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height
                        }),
                        style: api.style(),
                        z: 3
                    }
                }

                var option = {
                    tooltip: {
                        formatter: function (params) {
                            return params.value[4];
                        }
                    },
                    title: {
                        text: '',
                        left: 'center'
                    },
                    legend: {
                        data: ['bar', 'error']
                    },
                    grid: {
                        height:120,
                        top: '1%',
						left:'5%',
						right:'3%',
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        data: ['状态']
                    },
                    series: [{
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            normal: {
                                opacity: 0.5
                            }
                        },
                        data: []
                    }]
                };
                //根据配置绘制图形
                problemChart.setOption(option);
                return problemChart;
            }

			//初始当前问题列表 无数据
			function initProblemTable() {
                var problemsTable = $("#problemsTable").DataTable({
					"searching":true,
                    "iDisplayLength" : 5,
                    "ordering":false,
                    "createdRow": function (row, data, dataIndex) {
                        $('td', row).eq(3).addClass('right aligned');
                    },
                    "drawCallback": function () {//初始化后回调
                        //事件详情 modal 框
                        $("a.problem_time").on("click",function(){
                            var event_id = $(this).attr("data-id");
                            eventDetailModal(event_id);
                        });

                        //确认事件 modal 框
                        $("a.AcknowledgeCol").on("click",function(){
                            var event_id = $(this).attr("data-id");
                            getAcknowledgeModal(event_id);
                        })
                        //告警pop
                        popAlert($("a.alertCol"), $("#alert_pop"));

                        //确认记录pop
                        popAck($("a.AcknowledgeCol"), $("#acknowledge_pop"));
                    },
                    columns: [
                        {
                            "data": null,
                            "width": "20%",
                            "title": "开始时间",
                            "orderable": false,
                            render: function(data, type, row, meta) {
                                return '<a href="javascript:void(0)" data-id="'+row.event_id+'" class="problem_time">' + row.begin_time + '</a>';
                            }
                        },
                        {
                            "data": "end_time",
                            "width": "20%",
                            "title": "结束时间",
                            "orderable": false,
                        },
                        {
                            "data": "status",
                            "width": "20%",
                            "title": "状态",
                            "orderable": false,
                        },
                        {
                            "data": "duration_string",
                            "width": "20%",
                            "title": "持续时间",
                            "orderable": false,
                        },
                        {
                            "data": "recover_time",
                            "width": "10%",
                            "title": "告警",
                            "orderable": false,
                            render: function(data, type, row, meta) {
                                if(row.alert_state == "未告警") {
                                    //无悬浮事件
                                    return row.alert_state ;
                                }else if(row.alert_state == "无") {
                                    return "";
                                }else {
                                    //有悬浮事件
                                    return '<a href="javascript:void(0)" data-id="'+ row.event_id +'" class="alertCol" >' + row.alert_state + '(' + row.alert_num + ')</a>';
                                }
                            }
                        },
                        {
                            "data": null,
                            "width": "10%",
                            "title": "确认",
                            "orderable": false,
                            render: function(data, type, row, meta) {
                                    return '<a href="javascript:void(0)" data-id="'+row.event_id+'" class="AcknowledgeCol">' + row.acknowledged + '</a>';
                            }
                        }

                    ],
                });

                return problemsTable;
			}

			//获取带有数据的表格
			function getTableList(problemsTable) {

                $.ajax({
                    type: "get",
                    url: '/problem/detail_list',
                    data:send_data,
                    dataType: 'json',
                    success: function (result) {
                        if (result.success) {
							problemsTable.clear().rows.add(result.data).draw();
                            $('#table-dimmer').removeClass('active');
                        } else {

                        }
                    },
                    error: function (e) {

                    }
                });
			}

            //显示时间控件
            function showTimeCons(problemsTable,problemChart) {

                var rangeOption = {

                    onStart: (data,time_arr) => {

                        send_data.begin_time = time_arr[data.from];
                        send_data.end_time = time_arr[data.to];
                        //初始化图形
                        getProblemchart(problemChart);

                        //初始化列表
                        getTableList(problemsTable)

                    },
                    onFinish: (data,time_arr) => {

                        send_data.begin_time = time_arr[data.from];
                        send_data.end_time = time_arr[data.to];
                        //获取图形
                        getProblemchart(problemChart);

                        //获取列表
                        getTableList(problemsTable)

                    }
                };

                $('#time_filter').rangeSliderTime(rangeOption);

                /*var now = new Date();
                var end_time = new Date(now);
                end_time.setMinutes(0);
                end_time.setSeconds(0);
                end_time.setMilliseconds(0);
                var begin_time = new Date(end_time);
                //3表示三个月
                if(end_time.getMonth() > 3) {
                    begin_time.setMonth(end_time.getMonth() - 3);
                }else {
                    begin_time.setFullYear(end_time.getFullYear() - 1);
                    begin_time.setMonth(end_time.getMonth() + 9);
                }

                var begin_second = begin_time.getTime();
                var end_second = end_time.getTime();

                var time_arr = [];
                var vo_arr = [];
                var s = begin_second;
                while(s <= end_second) {
                    var dura_date = new Date();
                    dura_date.setTime(s);
                    time_arr.push(dura_date.Format("yyyy-MM-dd hh:mm:ss"));
                    vo_arr.push(dura_date.Format("MM-dd hh:mm"));
                    s += 3600 * 1000;
                }
                time_arr.push(now.Format("yyyy-MM-dd hh:mm:ss"));
                vo_arr.push(now.Format("MM-dd hh:mm"));

                $('#filter_content').css('display','block');
                $('#time_filter').ionRangeSlider({
                    type: "double",
//			grid:true,
                    from: vo_arr[0],
                    //TODO 最好使用返回的问题数中的最大值
                    to: vo_arr[time_arr.length-1],
                    values:vo_arr,
                    onStart: function (data) {
                       send_data.begin_time = time_arr[data.from];
                       send_data.end_time = time_arr[data.to];
						//初始化图形
                        getProblemchart(problemChart);

						//初始化列表
                        getTableList(problemsTable)
                    },
                    onChange: function (data) {

                    },
                    onFinish: function (data) {
//
                        send_data.begin_time = time_arr[data.from];
                        send_data.end_time = time_arr[data.to];
                        //获取图形
                        getProblemchart(problemChart);

                        //获取列表
                        getTableList(problemsTable)
                    },
                    onUpdate: function (data) {

                    }
                });*/
            }


		</script>
	</th:block>
</th:block>
</body>
</html>